<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FMS-图片管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" style="border-radius:0px;" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">FMS</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li ><a href="<%=request.getContextPath()%>/app/List">应用管理</a></li>
			<li class="active"><a href="#">图片管理</a></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle"
				data-toggle="dropdown"> 文件管理 <b class="caret"></b>
			</a>
				<ul class="dropdown-menu">
					<li><a href="#">Excel</a></li>
					<li><a href="#">PDF</a></li>
					<li><a href="#">Word</a></li>
					<li><a href="#">PPT</a></li>
					<li><a href="#">exe</a></li>
					<li><a href="#">zip</a></li>
					<li><a href="#">rar</a></li>
				</ul></li>
		</ul>
	</div>
	<div>
		<form class="navbar-form navbar-left" role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="请输入搜索内容...">
			</div>
			<button type="submit" class="btn btn-default">搜索</button>
		</form>
	</div>
</nav>

 <div class="well">
    <table>
        <tr>  
            <td>照片：</td>  
            <td><input type="file" id="fileInfo" class="form-control" multiple="multiple" name="fileInfo"/>
            </td>  
            <td><button type="button" class="btn btn-default " onclick="upload()">上 传</button></td>  
        </tr>  
    </table>  
 
 </div>
 

    <div  class="well">
      <ul id="result" class='list view image fluid'>
      </ul>
    </div>
  <!--  <div id="result" style="float: left;" class="panel-body"></div> -->

</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/js/ajaxfileupload.js"></script>

<script type="text/javascript">
function upload()  {  
      
   $.ajaxFileUpload({  
             url:'<%=request.getContextPath() %>/file/upload',             //需要链接到服务器地址  
             secureuri:false,  
             fileElementId:'fileInfo',                         //文件选择框的id属性  
             dataType: 'text', //服务器返回的格式，可以是json  
            success: function (data, status)             //相当于java中try语句块的用法  
             {
 				 console.log(data);
                 $('#result').append("<li><img src='"+data.data.url+"' class='img-thumbnail' /></li>");  
             },  
             error: function (data, status, e)             //相当于java中catch语句块的用法  
             {  
            	 alert("2"+data);  
                 alert("3"+status);  
                 alert("4"+e);  
                 $('#result').html('上传图片失败');  
             }
            /*  success : function(data) {
 				var dataInfo=JSON.parse(data);
 				console.log(dataInfo);
                $('#result').html('上传图片成功!请复制图片地址<br/>'+data.src);  
 			} */
           }  
         );  
 } 
</script>
</html>